<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>评论管理</el-breadcrumb-item>
      <el-breadcrumb-item>评论列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-input placeholder="请输入用户名" clearable v-model="username" @clear="searchRootComment">
          </el-input>
        </el-col>
        <el-col :span="4" >
          <el-input placeholder="请输入文章标题" clearable v-model="title" @clear="searchRootComment">
          </el-input>
        </el-col>
        <el-col :span="4" >
          <el-input placeholder="请输入评论内容" clearable v-model="content" @clear="searchRootComment">
          </el-input>
        </el-col>

        <el-col v-if="changeComment == 1" :span="4" style="margin-left: -60px">
          <el-button type="primary" icon="el-icon-search" @click="searchRootComment"></el-button>
        </el-col>
        <el-col v-if="changeComment == 0" :span="4" style="margin-left: -60px">
          <el-button type="success" icon="el-icon-search" @click="searchChildComment"></el-button>
        </el-col>

        <el-col :span="4" style="float: right">
          <el-button type="info" icon="el-icon-back" @click="backRootComment"></el-button>
        </el-col>

      </el-row>
      <el-table :data="rootCommentList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="评论ID" prop="id" width="70px"></el-table-column>
        <el-table-column label="文章标题" prop="article.title" width="230px"></el-table-column>
        <el-table-column label="评论内容" prop="content" width="290px"></el-table-column>
        <el-table-column label="用户名" prop="user.username" width="80px"></el-table-column>
        <el-table-column label="回复对象" prop="toUser.username" width="80px"></el-table-column>
        <el-table-column label="发布时间" prop="createTime" width="130px"></el-table-column>
        <el-table-column label="修改时间" prop="modifyTime" width="130px"></el-table-column>
        <el-table-column label="操作" width="249px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="showEditDialog(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="removeRootCommentById(scope.row.id,1)">删除</el-button>
            <el-button type="success" size="mini" @click="getChildCommentList(scope.row.id)">查看子评论</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10,15]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </el-card>


    <!--修改评论-->
    <el-dialog
        title="修改评论" :visible.sync="editDialogVisible" width="50%" @close="editCommentFormClose">
      <el-form :model="editCommentForm" :rules="editCommentFormRules" ref="editCommentFormRef" label-width="100px" class="demo-ruleForm">

        <el-input type="hidden" v-model="editCommentForm.id"></el-input>

        <el-form-item label="评论内容" prop="comment">
          <el-input v-model="editCommentForm.comment"></el-input>
        </el-form-item>

        <el-form-item label="文章标题" prop="article.title">
          <el-input v-model="editCommentForm.article.title" readonly></el-input>
        </el-form-item>

        <el-form-item label="用户名" prop="user.username">
          <el-input v-model="editCommentForm.user.username" readonly></el-input>
        </el-form-item>


<!--        <el-form-item label="角色" prop="roleIds">-->
<!--          <el-select v-model="editCommentForm.roleIds" multiple placeholder="请选择角色">-->
<!--            <el-option :label="item.name" :value="item.id" v-for="item in roleList" :key="item.id"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editComment">确 定</el-button>
        <el-button @click="editDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Vue from "vue";

export default {
  data() {
    return {
      rootId:'',
      username:'',
      changeComment:'1',
      title:'',
      content:'',
      editDialogVisible: false,
      pageNum: 1,
      pageSize: 5,
      rootCommentList: [],
      total: 0,
      editCommentForm: {
        id:'',
        content: "",
        user:{
          username:''
        },
        article:{
          title:''
        }
      },
      editCommentFormRules: {
        CommentName: [
          {required: true, message: "请输入用戶名", trigger: "blur"},
          {min: 3, max: 8, message: "用戶名在3-8个字符之間", trigger: "blur"}
        ],
        password: [
          {required: true, message: "请输入密码", trigger: "blur"},
          {min: 3, max: 8, message: "密码在3-8个字符之间", trigger: "blur"}
        ],
        tel: [{required: true, message: '请输入电话', trigger: 'blur'}],
        email: [{required: true, message: '请输入邮箱', trigger: 'blur'}],
        roleIds: [{type: 'array', required: true, message: '请至少赋予一个角色', trigger: 'blur,change'}],
        locked: [{required: true, message: "请选择账号状态", trigger: "blur"}]
      },

    };
  },
  methods: {
    async removeRootCommentById(id,status) {
      let url = "comment/deleteComment";
      this.$axios.get(url,{params:{
          id:id,
          status:status
        }
      }).then(res => {
            if (res.data.code == 200) {
              this.$message({
                type: 'success',
                message: res.data.msg,
                duration: 1000
              });
              this.getRootCommentList();
            } else {
              this.$message({
                message: res.data.msg,
                type: "error",
                duration: 1000
              })
            }
          })
    },


    showEditDialog(row) {
      this.editDialogVisible = true;
      this.editCommentForm = row;
    },

    editCommentFormClose() {
      this.$refs.editCommentFormRef.resetFields();
      this.editDialogVisible = false;
    },

    editComment() {
      this.$refs.editCommentFormRef.validate(valid => {
        if (!valid) {
          return;
        } else {
          let url = "manager/modify";
          console.log(this.editCommentForm)
          this.$axios.put(url, this.editCommentForm)
              .then(res => {
                if (res.data.code == 200) {
                  this.$message({
                    type: 'success',
                    message: res.data.msg,
                    duration: 1000
                  });
                  this.getCommentList();
                  this.$refs.editUserFormRef.resetFields();
                  this.editDialogVisible = false;
                } else {
                  this.$message({
                    message: res.data.msg,
                    type: "error",
                    duration: 1000
                  })
                }
              })
        }
      })

    },

    addCommentFormClose() {
      this.$refs.addUserFormRef.resetFields();
      this.addCommentForm.roleIds = "";
    },

    backRootComment() {
      this.pageNum = 1;
      this.changeComment = 1;
      this.getRootCommentList();
    },

    searchRootComment() {
      this.pageNum = 1;
      this.getRootCommentList();
    },

    searchChildComment() {
      this.pageNum = 1;
      this.getChildCommentList(this.rootId);
    },

    getRootCommentList() {
      let url = "comment/rootCommentList";
      this.$axios.get(url, {
        params: {
          now: this.pageNum,
          size: this.pageSize,
          username: this.username,
          title:this.title,
          content:this.content
        }
      }).then(res => {
        // console.log("+++++++++++++++++==")
        console.log(res)
        if (res.data.code == 200) {
          this.rootCommentList = res.data.data.list;
          this.total = res.data.data.total;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
        } else {
          this.$message({
            message: res.data.msg,
            type: "error",
            duration: 1000
          })
        }
      })
    },

    getChildCommentList(id) {
      console.log(id+'getChildCommentList')
      let url = "comment/childCommentList";
      this.$axios.get(url, {
        params: {
          now: this.pageNum,
          size: this.pageSize,
          username: this.username,
          title:this.title,
          content:this.content,
          rootId:id
        }
      }).then(res => {
        // console.log("+++++++++++++++++==")
        // console.log(res)
        if (res.data.code == 200) {
          this.rootCommentList = res.data.data.list;
          this.total = res.data.data.total;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.changeComment = 0;
          this.rootId = id;

        } else {
          this.$message({
            message: res.data.msg,
            type: "error",
            duration: 1000
          })
        }
      })
    },


    searchComment() {
      this.pageNum = 1;
      this.pageSize = 5;
      this.getRootCommentList();
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getRootCommentList();
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.getRootCommentList();
    },
    //把用户对象中包含的roleList其中的rolename转换为逗号分隔的字符串
    getRoleNames(arr) {
      if (!arr) return;
      let roleNameArr = new Array();
      for (let i = 0; i < arr.length; i++) {
        roleNameArr.push(arr[i].name);
      }
      return roleNameArr.join(",");
    },

    reloadData() {
      this.searchComment();
      this.getRoleList();
    }
  },
  created() {
    this.getRootCommentList();
  }
};
</script>
<style lang="less" scoped>
</style>